<template>
	<view class="main">
		<image class="mask" src="../../static/image/Mask.png" mode=""></image>
		<!-- <image class="notice" src="../../static/image/notice.png" mode="" @click="toNotice"></image> -->
		<view class="user" @click="toMyInfo">
			<view class="avatar">
				<image :src="mineData.headpic" mode=""></image>
			</view>
			<view class="nick-name">
				{{mineData.firstname}}
			</view>
			<view class="introduction">
				<text>{{mineData.description?mineData.description:"要不写点什么～"}}</text>
				<image src="../../static/image/editor.png" mode=""></image>
			</view>
		</view>
		<uni-list>
			<uni-list-item :title="$t('mine.setting')" thumb="../../static/image/setting.png" thumb-size="medium" showArrow to="/pages/preferencesSetting/preferencesSetting" />
			<uni-list-item :title="$t('mine.clearStorage')" thumb="../../static/image/clearStorage.png" thumb-size="medium" showArrow to="/pages/clearStorage/clearStorage"/>
			<uni-list-item :title="$t('mine.language')" thumb="../../static/image/language.png" thumb-size="medium" showArrow to="/pages/language/language" />	
			<uni-list-item :title="$t('mine.settingTitle')" thumb="../../static/image/settings.png" thumb-size="medium" showArrow to="/pages/setting/setting" />	
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mineData:{}
			}
		},
		onShow() {
			
			this.getUser()
		},
		methods: {
			getUser(){
				let token = JSON.parse(uni.getStorageSync('token')).token
				this.$httpRequest({
					url:"app/api/selfInfo.php",
					method:"POST",
					data:{
						ustoken:token
					}
				}).then(res=>{
					this.mineData = res.data
				})
			},
			toNotice(){
				uni.navigateTo({
					url:"/pages/messageList/messageList"
				})
			},
			toMyInfo(){
				uni.navigateTo({
					url:"/pages/myInformation/myInformation"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		position: relative;

		.mask {
			width: 100%;
			height: 456rpx;
		}

		.notice {
			position: absolute;
			right: 20rpx;
			top: 108rpx;
			width: 48rpx;
			height: 48rpx;
		}

		.user {
			position: absolute;
			top: 176rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
			width: 200rpx;
			flex-wrap: wrap;

			.avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.nick-name {
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 48rpx;
				text-align: center;
				margin-top: 4rpx;
				width: 100%;
			}

			.introduction {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6E7580;
				line-height: 48rpx;
				margin-top: 0rpx;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>
